@extends('backend.layouts.base')
@section('title', '模版管理')
@section('content')
    <div class="all">
        <div id="app" v-cloak>
            <div class="vue-head head-tab-con">
                <el-radio-group v-model="display_type">
                    <el-radio-button label="1" @click.native="gotoOther(1)">已安装</el-radio-button>
                    <el-radio-button label="2" @click.native="gotoOther(2)">未安装</el-radio-button>
                </el-radio-group>
            </div>
            <div class="vue-main">
                <div class="vue-main-form">
                    <div class="vue-main-title" style="margin-bottom:20px">
                        <div class="vue-main-title-left"></div>
                        <div class="vue-main-title-content" style="flex:0 0 130px">未安装模版列表</div>
                        <div class="" style="text-align:left;font-size:14px;color:#999">
                            <span>模版数量：[[total]]</span>&nbsp;&nbsp;&nbsp;
                        </div>
                        <div class="vue-main-title-button">
                        </div>
                    </div>
                    <el-table :data="list" style="width: 100%">
                        <el-table-column label="模版" align="center" prop="theme"></el-table-column>
                        <el-table-column label="名称" align="center" prop="name"></el-table-column>
                        <el-table-column label="版本号" align="center" prop="version"></el-table-column>
                        <el-table-column label="支持PC端" align="center" prop="is_pc_desc"></el-table-column>
                        <el-table-column label="支持H5端" align="center" prop="is_h5_desc"></el-table-column>
                        <el-table-column label="描述" align="center" prop="description"></el-table-column>
                        <el-table-column prop="refund_time" label="操作" align="center" width="200">
                            <template slot-scope="scope">
                                <div class="table-option">
                                    <el-link title="安装" :underline="false" @click="install(scope.row.theme)" style="text-align: center;width:30px">
                                        <a>安装</a>
                                    </el-link>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return {
                    display_type:2,
                    list:[],
                    rules: {},
                    total:0
                }
            },
            created() {

            },
            mounted() {
                this.getData();
            },
            methods: {
                getData() {
                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post('{!! absolute_admin_url('sys.theme.getUnInstalledList') !!}',{}).then(function(response) {
                        if (response.data.result) {
                            this.list = response.data.data;
                            if(this.list){
                                this.total = this.list.length;
                            }

                            loading.close();

                        } else {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                        }
                        loading.close();

                    }, function(response) {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                        loading.close();
                    });
                },
                install(theme) {
                    this.$confirm('确定安装模版吗', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
                        let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                        this.$http.post('{!! absolute_admin_url('sys.theme.doInstall') !!}',{theme:theme}).then(function (response) {
                                if (response.data.result) {
                                    this.$message({type: 'success',message: '操作成功!'});
                                }
                                else{
                                    this.$message({type: 'error',message: response.data.msg});
                                }
                                this.getData();
                                loading.close();
                            },function (response) {
                                this.$message({type: 'error',message: response.data.msg});
                                loading.close();
                            }
                        );
                    }).catch(() => {
                        this.$message({type: 'info',message: '已取消操作'});
                    });
                },
                gotoOther(type) {
                    let url = ""
                    if(type==1) {
                        url = '{!! absolute_admin_url('sys.theme.installedView') !!}'
                    }else if(type==2) {

                    }
                    if(url) {
                        window.location.href=url
                    }
                },
            },
        })

    </script>
@endsection
